<template>
    <div class="l-rblock" ref="report" :id="id" ></div>
</template>
<script>
  export default {
    name:'l-grapecity',
    props:{
      params:{
        default:()=>[]
      },
      reportId:String
    },
    watch:{
      params(){
        this.viewer.openReport(this.reportId,this.params)
      },
      reportId(){
        this.viewer.openReport(this.reportId,this.params)
      }
    },
    data() {
      return {
        viewer:null,
        id:`grapecity_${this.$uuid()}`
      }
    },
    computed:{
    },
    mounted(){
      this.viewer =window.GrapeCity.ActiveReports.JSViewer.create({
          reportID: this.reportId,
          element: `#${this.id}`,//this.$refs.report,
          reportService:{
            url: `${this.reportUrl || ''}/api/reporting`
          },
          localeUri: `${this.reportUrl || ''}/custom-locale-zh.json`,
          reportParameters:this.params
      })
    },
    methods: {
    }
  }
</script>